import { createRouter, createWebHistory } from 'vue-router';
// 导入pinia库来查看是否有token然后配置权限访问
import { useUserStore } from '@/stores/user';

// 导入进度加载提示库
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

// 不显示加载提示圈
NProgress.configure({
  showSpinner: false,
});

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      component: () => import('@/views/Login/index.vue'),
      meta: { title: '登陆' },
    },
    {
      path: '/',
      component: () => import('@/views/Layout/index.vue'),
      redirect: '/home',
      children: [
        {
          path: '/home',
          component: () => import('@/views/Layout/Home/index.vue'),
          meta: { title: '首页' },
        },
        {
          path: '/article',
          component: () => import('@/views/Layout/Article/index.vue'),
          meta: { title: '健康百科' },
        },
        {
          path: '/notify',
          component: () => import('@/views/Layout/Notify/index.vue'),
          meta: { title: '消息通知' },
        },
        {
          path: '/user',
          component: () => import('@/views/Layout/User/index.vue'),
          meta: { title: '个人中心' },
        },
      ],
    },
    {
      path: '/user/patient',
      component: () => import('@/views/Layout/User/PatientPage.vue'),
      meta: { title: '家庭档案' },
    },
    {
      path: '/consult/fast',
      component: () => import('@/views/Consult/ConsultFast.vue'),
      meta: { title: '极速问诊' },
    },
    {
      path: '/consult/dept',
      component: () => import('@/views/Consult/ConsultDept.vue'),
      meta: { title: '选择科室' },
    },
    {
      path: '/consult/illness',
      component: () => import('@/views/Consult/ConsultIllness.vue'),
      meta: { title: '病情描述' },
    },
    {
      path: '/consult/patient',
      component: () => import('@/views/Consult/ConsultPatient.vue'),
      meta: { title: '选择患者' },
    },
    {
      path: '/consult/pay',
      component: () => import('@/views/Consult/ConsultPay.vue'),
      meta: { title: '问诊支付' },
    },
    {
      path: '/room',
      component: () => import('@/views/Room/index.vue'),
      meta: { title: '问诊室' },
      // 进入 Room/index.vue 问诊室之前就判断
      beforeEnter(to) {
        // url中传递的参数都是 string 类型
        if (to.query.payResult === 'false') return '/user/consult';
      },
    },
    {
      path: '/user/consult',
      component: () => import('@/views/Layout/User/ConsultPage.vue'),
      meta: { title: '问诊室' },
    },
    {
      path: '/user/consult/:id',
      component: () => import('@/views/Layout/User/ConsultDetail.vue'),
      meta: { title: '问诊详情' },
    },
    {
      path: '/login/callback',
      component: () => import('@/views/Login/LoginCallback.vue'),
      meta: { title: 'QQ登陆-绑定手机号' },
    },
    {
      path: '/test',
      component: () => import('@/views/Test/TestPage.vue'),
      meta: { title: '测试页面' },
    },
  ],
});

// 全局前置路由守卫
router.beforeEach((to) => {
  // 路由加载提示
  NProgress.start();
  // 处理标题
  // document.title = `优医问诊-${to.meta.title}`;
  // 更优秀的处理方式
  if (to.meta.title) {
    document.title = '优医问诊' + to.meta.title;
  } else {
    document.title = '优医问诊';
  }
  // 用户仓库
  const user = useUserStore();
  // 不需要token就能访问的白名单页面
  const wihteList = ['/login', '/404', '/login/callback'];
  // 获取到pinia仓库是否有token或者去login登录页都放行
  if (!user.user?.token && !wihteList.includes(to.path)) return '/login';
  return true;
});
// 全局后置路由
router.afterEach((to) => {
  // 处理标题
  document.title = `优医问诊-${to.meta.title}`;
  // 加载提示关闭
  NProgress.done();
});

export default router;
